/** 
 * 学习目标：setState修改状态
+ 语法`this.setState({要修改的数据名: 新的值})`
+ 注意：不要直接修改state中的值，必须通过`this.setState()`方法进行修改
+ `setState`的作用
  + 修改state
  + 更新UI

+ 思想：数据驱动视图
 * */
import React from "react";

export default class App extends React.Component {
    state = {
        count: 1,
        list: []
    }
    render() {
        return (
            <div>
                <h1>看this</h1>
                <div>
                    <p>次数: {this.state.count}</p>
                    <button onClick={() => this.handleClick()}>方案一</button>
                </div>
            </div>
        )
    }
    //  方案一
    handleClick = () => {
        // 使用新值覆盖旧值
        this.setState({
            count: this.state.count + 1,
            list: [...this.state.list, 'b']
        })
        // 以下是错误的写法
        // this.state.count++
        // this.state.list.push('a')
        // 或
        // this.setState({
        //     count: this.state.count++
        // })
    }
}